<script setup>
import {inject} from "vue";

const gMapProvide = inject("gMap");
// const gFirstImageLayer = inject("gFirstImageLayer");
const gFirstFeatureLayer = inject("gFirstFeatureLayer");
const gFirstTextLayer = inject("gFirstTextLayer");

import useDesignerStore from '../../store/index';
import ImageTool from "../../common/ImageTool";
import AILabel from "../../common/libs/AILabel/main";
import Common from "../../common/Common";
import ImageInfo from "../../common/ImageInfo";
const designerStore = useDesignerStore();

const selectImage = (imgItem, index) => {
  designerStore.selectedImageIndex = index;
  scrollToIndex(index);
  // 图片层添加
  ImageTool.getImageInfo(imgItem.path, async (imageInfo) => {
    // aiLabelMapObj.value.center.x = imageInfo.width / 2;
    // aiLabelMapObj.value.center.y = imageInfo.height / 2;

    gMapProvide.value.setCenter({x: imageInfo.width / 2, y: imageInfo.height / 2});

    // 移除所有图层
    gMapProvide.value.removeAllLayers();
    const gFirstImageLayer = new AILabel.Layer.Image(
        "first-layer-image", // id
        {
          src: imageInfo.src,
          width: imageInfo.width,
          height: imageInfo.height,
          crossOrigin: false, // 如果跨域图片，需要设置为true
          position: {
            // 左上角相对中心点偏移量
            x: 0,
            y: 0,
          },
          // 网格
          grid: {
            // 3 * 3
            columns: [{ color: "#9370DB" }],
            rows: [{ color: "#9370DB" }],
          },
        }, // imageInfo
        { name: "第一个图片图层" }, // props
        { zIndex: 1 } // style
    );
    // 添加到gMap对象
    gMapProvide.value.addLayer(gFirstImageLayer);

    // 添加矢量图层
    gFirstFeatureLayer.value = new AILabel.Layer.Feature(
        "first-layer-feature", // id
        { name: "第一个矢量图层" }, // props
        { zIndex: 10 } // style
    );
    gMapProvide.value.addLayer(gFirstFeatureLayer.value);

    // 添加文本图层
    gFirstTextLayer.value = new AILabel.Layer.Text(
        'first-layer-text', // id
        {name: '第一个文本图层'}, // props
        {zIndex: 12, opacity: 1} // style
    );
    gMapProvide.value.addLayer(gFirstTextLayer.value);

    let image_json=await window.electronApi.getImageJson(imgItem.path);
    // console.log(image_json);
    if(image_json){
      const imageInfo=new ImageInfo()
      imageInfo.loadFromJson(image_json);
      imageInfo.getShapes().forEach(shape => {
        // console.log(shape);
        if(shape.shape_type=='polyline'){
          // 标注层添加
          const gFirstPolylineFeature = new AILabel.Feature.Polyline(
              'first-feature-polyline-'+Common.randomString(6), // id
              shape.points, // shape
              {name: shape.label}, // props
              {
                strokeStyle: "#FF1493",
                lineJoin: "round",
                lineCap: "round",
                lineWidth: 10,
                fillStyle: "#FF1493",
              } // style
          );
          // 添加到gMap对象
          gFirstFeatureLayer.value.addFeature(gFirstPolylineFeature);
        }else if(shape.shape_type=='polygon'){
          // 标注层添加
          const gFirstPolygonFeature = new AILabel.Feature.Polygon(
              'first-feature-polygon-'+Common.randomString(6), // id
              shape.points, // shape
              {name: shape.label}, // props
              {
                strokeStyle: "#FF1493",
                lineJoin: "round",
                lineCap: "round",
                lineWidth: 10,
                fillStyle: "#FF1493",
              } // style
          );
          // 添加到gMap对象
          gFirstFeatureLayer.value.addFeature(gFirstPolygonFeature);
        }else if(shape.shape_type=='point'){
          // 标注层添加
          const gFirstPointFeature = new AILabel.Feature.Point(
              'first-feature-point-'+Common.randomString(6), // id
              shape.points, // shape
              {name: shape.label}, // props
              {
                strokeStyle: "#FF1493",
                lineJoin: "round",
                lineCap: "round",
                lineWidth: 10,
                fillStyle: "#FF1493",
              } // style
          );
          // 添加到gMap对象
          gFirstFeatureLayer.value.addFeature(gFirstPointFeature);
        }else if(shape.shape_type=='text'){
          // 标注层添加
          const gFirstTextFeature = new AILabel.Feature.Text(
              'first-feature-text-'+Common.randomString(6), // id
              shape.points, // shape
              {name: shape.label}, // props
              {
                strokeStyle: "#FF1493",
                lineJoin: "round",
                lineCap: "round",
                lineWidth: 10,
                fillStyle: "#FF1493",
              } // style
          );
          // 添加到gMap对象
          gFirstFeatureLayer.value.addFeature(gFirstTextFeature);
        }else if(shape.shape_type=='rectangle'){
          console.log('矩形');
          console.log(shape);
          // 标注层添加
          const gFirstText = new AILabel.Text(
              'first-text-'+Common.randomString(6), // id
              {text: shape.label, position: {x: shape.points.x, y: shape.points.y}, offset: {x: 0, y: 0}}, // shape
              {name: shape.label}, // props
              {fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0'} // style
          );
          gFirstTextLayer.value.addText(gFirstText);
          const gFirstRectFeature = new AILabel.Feature.Rect(
              'first-feature-rect-'+Common.randomString(6), // id
              shape.points, // shape
              {name: shape.label}, // props
              {strokeStyle: '#ea0f0f', lineWidth: 1} // style // style
          );
          // 添加到gMap对象
          gFirstFeatureLayer.value.addFeature(gFirstRectFeature);
        }else if(shape.shape_type=='circle'){
          // 标注层添加
          const gFirstCircleFeature = new AILabel.Feature.Circle(
              'first-feature-circle-'+Common.randomString(6), // id
              shape.points, // shape
              {name: shape.label}, // props
              {
                strokeStyle: "#FF1493",
                lineJoin: "round",
                lineCap: "round",
                lineWidth: 10,
                fillStyle: "#FF1493",
              } // style
          );
          // 添加到gMap对象
          gFirstFeatureLayer.value.addFeature(gFirstCircleFeature);
        }else{
          console.log('未知类型');
        }

      });
    }


  });
}
const prevImage = () => {
  const currentIndex = designerStore.selectedImageIndex;
  if (currentIndex > 0) {
    selectImage(designerStore.imageList[currentIndex - 1],currentIndex - 1);
  }
}
const nextImage = () => {
  const currentIndex = designerStore.selectedImageIndex;
  if (currentIndex < designerStore.imageList.length - 1) {
    selectImage(designerStore.imageList[currentIndex + 1],currentIndex + 1);
  }
}

const scrollToIndex = (index) => {
  //通过jquery实现滚动条滚动到指定位置(左右滚动)
  const $content = $(".thumbnail-list-bar-content");
  const $item = $content.find(".thumbnail-list-bar-content-item[data-index='" + index + "']");
  const $itemLeft = $item.offset().left;
  const $itemRight = $itemLeft + $item.width();
  const $contentLeft = $content.offset().left;
  const $contentRight = $contentLeft + $content.width();
  const $contentWidth = $content.width();
  const $itemWidth = $item.width();
  const $itemHalfWidth = $itemWidth / 2;
  const $contentHalfWidth = $contentWidth / 2;
  const $itemCenter = $itemLeft + $itemHalfWidth;
  const $contentCenter = $contentLeft + $contentHalfWidth;
  const $moveDistance = $itemCenter - $contentCenter;
  const $moveDistanceLeft = $moveDistance - $contentHalfWidth;
  const $moveDistanceRight = $moveDistance + $contentHalfWidth;
  if ($moveDistanceLeft > 0) {
    $content.animate({
      scrollLeft: $moveDistanceLeft
    }, 300);
  } else if ($moveDistanceRight < 0) {
    $content.animate({
      scrollLeft: $moveDistanceRight
    }, 300);
  }
}

</script>
<template>
  <div class="thumbnail-list-bar">
    <!-- 上一张按钮 -->
    <div class="thumbnail-list-bar-btn-prev" @click="prevImage()">◀</div>
    <!-- 下一张按钮 -->
    <div class="thumbnail-list-bar-btn-next" @click="nextImage()">▶</div>

    <div class="thumbnail-list-scrollbar">
      <div class="thumbnail-list-bar-content">
        <div class="thumbnail-list-bar-content-item"  v-for="(item, index) in designerStore.imageList" :data-index="index" :key="index" :class="{active: index === designerStore.selectedImageIndex}" @click="selectImage(item, index)">
          <img :src="item.path" alt="thumbnail">
          <div class="thumbnail-list-bar-content-item-title">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.thumbnail-list-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(242, 242, 242, 0.55);
  padding: 5px;
  border-radius: 10px;
  //box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 60%;
  z-index: 9;
  margin: 0 auto;

  .thumbnail-list-bar-btn-prev,
  .thumbnail-list-bar-btn-next {
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      color: #666;
      transform: translateY(-50%) scale(1.1);
      background-color: #f2f2f2;
    }
    &:active {
      transform: translateY(-50%) scale(0.9);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      background-color: #f2f2f2;
    }
  }

  .thumbnail-list-bar-btn-prev {
    left: 10px;
  }

  .thumbnail-list-bar-btn-next {
    right: 10px;
  }

  .thumbnail-list-bar-title {
    margin-bottom: 20px;
    text-align: center;
    h2 {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
  }
  .thumbnail-list-scrollbar {
    display: flex;
    width: calc(100% - 10px);
    height: 60px;
    //height: 100px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    &::-webkit-scrollbar {
      width: 0;  /* Remove scrollbar space */
      background: transparent;  /* Optional: just make scrollbar invisible */
    }

    .thumbnail-list-bar-content {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      flex-direction: row;
      //margin-bottom: 20px;
      align-items: center;

      .thumbnail-list-bar-content-item {
        width: 50px;
        height: 50px;
        margin: 0 5px;
        position: relative;
        border-radius: 2px;
        //box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          transform: scale(1.1);
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        }
        &:active {
          transform: scale(1.1);
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        &.active {
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
          transform: scale(1.1);
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .thumbnail-list-bar-content-item-title {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          //height: 30px;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 10px;
          //font-weight: bold;
          border-radius: 0 0 10px 10px;
          //显示两行，超出部分省略
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}
</style>